<template>
  <div>
    对象数据选择-单选
    <SelectObject
      :disabled="disabled"
      :config="selectConfig"
      v-model="selectData"
      :select-multiple="false"
      :selectShowView="selectShowView"
      :async-set-table-data="setTableData"
      :select-equals="selectEquals"
      @confirm="confirm"
    ></SelectObject>
  </div>
</template>

<script>
import SelectObject from "@localModules/ZhiXinLib/element-components/select-object";

export default {
  name: "Demo01",
  // 定义用到的组件
  components: {SelectObject},
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins: [],
  // 属性定义使用对象的形式进行定义
  props: {indexProps: {type: String, default: 'indexProps'},},
  // 定义变量
  data() {
    return {
      selectData: [
        {
          '666': '44410',
        }
      ],
      disabled: false,
      selectConfig: [
        {
          label: '第一列',
          prop: '666',
          search: {
            type: 'input'
          }
        },
        {
          label: '第二列',
          children: [
            {
              label: '第二列-1',
              prop: '55551',
              search: {
                type: 'input'
              }
            },
            {
              label: '第二列-2',
              children: [
                {
                  label: '第二列-2-1',
                  prop: '55552-1',
                  search: {
                    type: 'inputNumber'
                  }
                },
                {
                  label: '第二列-2-2',
                  prop: '55552-2',
                  search: {
                    type: 'input'
                  }
                }
              ]
            }
          ]
        },
        {
          label: '第三列',
          prop: '3333',
          search: {
            type: 'inputNumber'
          }
        },
        {
          label: '超长文字9999999999',
          prop: '99',
          minWidth: '500px',
          search: {
            labelWidth: '200px',
            type: 'inputNumber'
          }
        }
      ]
    }
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    // indexProps(){
    //   return this.test;
    // },
    // indexProps2: {
    //		get(){
    //			//return this.name.split('').reverse().join('');
    //			return this.firstName+''+this.lastName;
    //		},
    //		set(value){
    //		}
    // }
  },
  // 监听属性值的变化
  watch: {
    // indexProps(val){
    //   console.log(val)
    // },
    selectData: {
      handler(value, oldValue) {
        console.log(value)
      },
      immediate: true,
      deep: true
    }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {
  },
  // 在页面创建完执行
  created() {
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    confirm(selectRows) {
      console.log(selectRows);
    },
    selectShowView(item) {
      return item['666']
    },
    selectEquals(oldItem, newItem) {
      return oldItem['666'] === newItem['666']
    },
    setTableData(data, page) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const value = []
          for (let i = page.pageNum * 10; i < page.pageNum * 10 + page.pageSize; i++) {
            value.push({
              '666': '444' + i,
              '555': '555' + i,
            })
          }
          resolve({data: value, total: 60})
        }, 2000)
      })
    }
  },
}
</script>

<style scoped lang="scss">

</style>
